<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>
            <input type="checkbox" v-model="checkedAll">全选
        </h3>
        <div>
            喜欢的兴趣爱好:
                <span v-for="item in list">
                    <input type="checkbox" v-model="item.checked"/> {{item.name}}
                </span>

        </div>

    </div>
</body>
<script>
    new  Vue({
        el:"#app",
        data:{
            checkedAll:false,
            list:[{id:1,name:"睡觉",checked:false},{id:2,name:"吃饭",checked:false},{id:3,name:"豆豆",checked:false}]
        },
        watch:{
            checkedAll(flag){
                this.list.forEach(item=>{
                    item.checked = flag;
                })
            },
            list:{
                deep:true, //深度监听 针对引用类型
                handler(newList){
                    // console.log(this.list);
                    // console.log(newList);
                    let flag = newList.every(item=>item.checked);
                    this.checkedAll = flag;

                }
            }
            
        }

    })

</script>
</html>